import React, { useState } from "react";
import PropTypes from "prop-types"; //为组件设置属性信息
import { Upload } from "antd";
import { dalImgUrl } from "../utils/tools";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons";
export const FileUpload = ({ imageUrl, setImageUrl }) => {
  const [loading, setLoading] = useState(false);
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );
  const handleChange = (info) => {
    if (info.file.status === "uploading") {
      setLoading(true);
      return;
    }
    if (info.file.status === "done") {
      // Get this url from response in real world.
      setLoading(false);
      console.log(info);
      setImageUrl(info.file.response.info);
    }
  };
  return (
    <Upload
      name="file"
      listType="picture-card"
      className="avatar-uploader"
      showUploadList={false}
      action="http://localhost:3009/api/v1/common/file_upload"
      onChange={handleChange}
    >
      {imageUrl ? (
        <img src={dalImgUrl(imageUrl)} alt="avatar" style={{ width: "100%" }} />
      ) : (
        uploadButton
      )}
    </Upload>
  );
};

FileUpload.propTypes = {
  imageUrl: PropTypes.string.isRequired,
};
export default FileUpload;
